<template>
  <div class="bigBox">
    <div class="title">文件签收</div>
    <div class="case">
      签收情况: 已签{{ list[0].signedNums || 0 }}/共{{ list.length }}单位需签收
      签收状态：正在签收 签收结束时间：{{ $route.query.releaseTime }}
    </div>
    <div class="loginOrSign" v-if="!userInfo">
      <div>账号：</div>
      <el-input
        v-model="loginForm.username"
        placeholder="请输入用户名"
        size="medium"
        style="width: 3.5rem"
      ></el-input>
      <div style="margin-left: 5px">密码：</div>
      <el-input
        v-model="loginForm.password"
        placeholder="请输入密码"
        :type="passwordType"
        size="medium"
        style="width: 3.5rem"
      ></el-input>
      <div class="showpwd" @click="showpwd">
        <svg-icon
          :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"
        />
      </div>
      <el-button
        type="primary"
        size="medium"
        :loading="loading"
        style="height: 0.45rem; margin-left: 20px"
        @click="login"
        >登录</el-button
      >
    </div>
    <div v-else>
      <el-button
        type="text"
        size="medium"
        icon="el-icon-download"
        v-downLoad="url"
        >文字按钮(点击下载文件)
      </el-button>
    </div>
    <div class="headline">
      <div class="titles">
        <i class="el-icon-s-grid"></i> 标题：通知----所需签收单位排行
      </div>
      <div class="table">
        <el-table
          :data="list"
          style="width: 80%; margin: 0.6rem"
          :header-cell-style="{ background: '#ebeef5' }"
          size="medium"
        >
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="deptName" label="签收单位"> </el-table-column>
          <el-table-column prop="agent" label="经办人"> </el-table-column>
          <el-table-column prop="signTime" label="签收时间"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button plain icon="el-icon-edit" @click="signFor(row)">{{
                row.signState == 1 ? "待签收" : "已签收"
              }}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import crypto from "@/utils/crypto";
export default {
  name: "File",
  props: ["InFormId"],
  data() {
    return {
      loading: false,
      passwordType: "password",
      loginForm: {
        username: "",
        password: "",
      },
      userInfo: true,
      list: [],
    };
  },
  mounted() {
    this.getIsInFromList();
    // 组件挂载时判断用户是否登录
    this.userInfo = JSON.parse(sessionStorage.getItem("userInfo"));
  },
  methods: {
    // 获取数据
    async getIsInFromList() {
      let result = await this.$API.receptionist.reqGetSign({
        id: this.InFormId,
      });
      if (result.status == 200) {
        this.list = result.data;
      }
    },
    //   展示密码
    showpwd() {
      if (this.passwordType == "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
      console.log(this.userInfo);
    },
    // 登录按钮
    login() {
      this.loading = true;
      let params = { ...this.loginForm };
      const passWord = crypto.encrypt(params.password);
      params.password = passWord;
      this.$store
        .dispatch("user/login", params)
        .then(() => {
          // let routeUrl = this.$router.resolve({
          //     path: '/dashboard' || '/'
          //   });
          //   window.open(routeUrl.href, '_blank');
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.userInfo = true;
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    // 签收按钮
    async signFor(row) {
      let data = {
        id: row.id,
        userId: Number(sessionStorage.getItem("userId")),
      };
      let result = await this.$API.receptionist.changeSignState(data);
      if (result.status == 200) {
        this.$message({
          message: "签收成功",
          type: "success",
        });
        this.getIsInFromList();
      }
    },
  },
  computed: {
    url() {
      const { file, fileName } = this.$route.query;
      return {
        file,
        fileName,
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.bigBox {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .title {
    width: 80%;
    height: 0.65rem;
    background-color: #dfe2eb;
    color: #2c3e50;
    font-size: 0.25rem;
    line-height: 0.65rem;
    padding-left: 0.8rem;
  }
  .case {
    width: 80%;
    height: 0.5rem;
    font-size: 0.2rem;
    line-height: 0.5rem;
    padding-left: 0.8rem;
    border-bottom: 1px solid #dcdfe6;
  }
  .loginOrSign {
    width: 80%;
    height: 0.8rem;
    display: flex;
    align-items: center;
    font-size: 0.23rem;
    padding-left: 0.8rem;
    .showpwd {
      width: 20px;
      height: 20xp;
      position: relative;
      right: 25px;
    }
  }
  .headline {
    width: 80%;
    height: 100%;
    border: 1px solid #dfe2eb;
    .titles {
      font-size: 0.23rem;
      width: 100%;
      height: 0.5rem;
      line-height: 0.5rem;
      padding-left: 0.8rem;
      background-color: #dfe2eb;
    }
    .table {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
  }
}
</style>
